<template>
  <div>

      <van-swipe :autoplay="3000" :height="300">
        <van-swipe-item v-for="item in getProductalbumPics()" :key="item">
          <el-image :src="item" class="img-style"></el-image>
        </van-swipe-item>
      </van-swipe>

      <van-panel style="margin:  15px 15px 15px 15px">
        <van-tag type="danger" v-if="product.deleteStatus==1">已删除</van-tag>
        <van-tag type="primary">{{product.publishStatus |formatPublishStatus}}</van-tag>

        <h3>{{product.name}}</h3>
        <h5>{{product.subTitle}}</h5>
        <div v-if="selectsku">
          <van-tag color="#7232dd" plain>{{selectsku.sp}}</van-tag>
          <span
            style="{margin-left: 5px;color: #ee0a24;font-size: 15px;}"
          >{{"价格：¥"+selectsku.price +"元/"+product.unit }}</span>
          <span
            style="{margin-left: 5px;color: #969799;font-size: 10px;text-decoration: line-through;}"
          >{{"¥"+selectsku.originalPrice +"元/"+product.unit }}</span>
        </div>
        <div v-else>
          <h5 style="color:red">此规格下无商品</h5>
        </div>
        <van-tag round type="danger" v-if="product.newStatus ==1">新品</van-tag>
        <van-tag round type="warning" v-if="product.recommandStatus ==1">推荐</van-tag>
        <van-tag round type="warning" v-if="product.previewStatus ==1">预告商品</van-tag>
        <van-tag
          round
          type="warning"
          v-if="product.promotionType"
        >{{ product.promotionType | formatPromotionType }}</van-tag>
      </van-panel>

      <van-panel style="margin:  15px 15px 15px 15px">
        <el-collapse>
          <el-collapse-item title="选择规格">
            <sacn-skulist v-model="product" @cell-click="productAttrChange"></sacn-skulist>
          </el-collapse-item>
        </el-collapse>
      </van-panel>

      <van-panel>
        <h5 style="margin:  15px 15px 15px 15px" v-if="product.description">{{product.description}}</h5>
        <div v-html="product.detailMobileHtml"></div>
      </van-panel>


    <van-goods-action v-if="product.deleteStatus!=1">
      <van-goods-action-button
        type="danger"
        @click.native.prevent="handlepush(2)"
        v-if="product.publishStatus == 0"
      >上架</van-goods-action-button>
      <van-goods-action-button
        type="danger"
        @click.native.prevent="handlepush(0)"
        v-if="product.publishStatus == 1"
      >下架</van-goods-action-button>

      <van-goods-action-button type="danger" @click.native.prevent="handelEdit">编辑</van-goods-action-button>
    </van-goods-action>
    <van-goods-action v-else>
      <van-goods-action-button type="danger" @click.native.prevent="handelEdit">编辑</van-goods-action-button>
    </van-goods-action>
  </div>
</template>
<script>
import { productinfo, updateProduct } from "@/api/product";
import sacnSkulist from "./components/sacnSkulist";
export default {
  name: "ProductScan",
  components: { sacnSkulist },
  filters: {
    // 促销类型
    formatPromotionType(value) {
      if (value == 0) {
        return "原价";
      } else if (value == 1) {
        return "使用促销价";
      } else if (value == 2) {
        return "使用会员价";
      } else if (value == 3) {
        return "使用阶梯价格";
      } else if (value == 4) {
        return "使用满减价格";
      } else if (value == 5) {
        return "限时购";
      }
    },
    formatPublishStatus(value) {
      if (value == 0) {
        return "已下架";
      } else if (value == 1) {
        return "已上架";
      } else if (value == 2) {
        return "审核中";
      } else if (value == 3) {
        return "审核失败";
      }
    }
  },
  created() {
    this.getProductInfo();
  },
  data() {
    return {
      product: Object,
      selectsku: Object
    };
  },
  methods: {
    getProductInfo() {
      productinfo(this.$route.query.id).then(response => {
        this.product = response.data;
        this.product.skuList.forEach(element => {
          if (element.id == this.product.defualSku) {
            this.selectsku = element;
          }
        });
      });
    },
    // 获取商品图片
    getProductalbumPics() {
      if (this.product.albumPics) {
        var tetyrnarr = this.product.albumPics.split(",");
        return tetyrnarr;
      } else {
        return [];
      }
    },
    handelEdit() {
      this.$router.push({ path: "/addProduct?id=" + this.product.id });
    },
    handlepush(val) {
      this.listLoading = true;
      this.product.publishStatus = val;
      updateProduct(this.product.id, this.product).then(response => {
        this.listLoading = false;
        this.$message.success("操作成功");
      });
    },
    productAttrChange(row) {
      this.selectsku = row;
    }
  }
};
</script>

<style scoped>
.el-main {
  margin: 0px 0px 20px 0px;
  padding: 0px 0px 20px 0px;
}

.img-style {
  width: 100%;
  vertical-align: middle;
}
.footer {
  position: fixed; /*or前面的是absolute就可以用*/
  bottom: 0px;
  width: 100%;
  line-height: 40px;
  background-color: white;
  text-align: right;
}
.footer-add {
  vertical-align: middle;
}
</style>